<template>
    <div class="jx-infos">    
      <div v-if="checkLists.length > 0">
            <div class="jx-title">
            <h3 class="fl">配置信息</h3>
            </div>
            <p class="show"><span style="color:red">*</span>&nbsp;首页课程展示</p>
            <div class="checkList" >
                <el-checkbox-group v-model="checkList">
                    <el-checkbox  v-for="(item,index) in checkLists" :label="item.id" :key="index">{{item.keyValue}}</el-checkbox>    
                </el-checkbox-group>
            </div>
            <div class="button-style savefn" @click="saveFn()" >保 存</div>
        </div>
        <div v-else  class="jx-course-infos">
             <img src="./../../../assets/images/index_no_data.png" />
             <span>暂无数据</span>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                checkLists: [],
                checkList:[],
                //id集合
                idList:[]
            }
        },
        created () {
            this.info()
            
        },
        methods:{
            //初始化信息
            info(){
                let self = this
                self.$http.get('/tes/user/config').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                         this.checkLists = res.data.courseIndex
                         if(res.data.courseIndex != undefined){
                             for(var i= 0; i<res.data.courseIndex.length; i++){
                                self.idList.push(res.data.courseIndex[i].id) 
                                if(res.data.courseIndex[i].show){
                                    self.checkList.push(res.data.courseIndex[i].id) 
                                }
                             }  
                         }
                    }
                })
            },
            //保存
            saveFn(){
                //过滤得到非选中项
                let difference = this.idList.concat(this.checkList).filter(v =>  this.idList.includes(v) && !this.checkList.includes(v))
                let self = this
                if(self.checkList == ''){
                    self.$message({
                        message: '请至少选择一项',
                        type: 'warning'
                    });
                    return
                }else{
                    self.$http.put('/tes/user/config',{
                        courseDirectionHideIds:difference
                    }).then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            self.$message({
                                message: '保存成功',
                                type: 'success'
                            });
                        }else{
                            self.$message.error(res.message)
                        }
                    })
                }
            }
            
        }
    }
</script>


<style lang="scss" scoped>
@import "./../../../styles/layout/color_variables";
    .jx-infos{
         padding-left: 50px;
         padding-top: 20px;
         .jx-title{
             overflow: hidden;
            &>h3{
                height: 32px;
                line-height: 32px;
                font-size: $fs18;
                color: #727272
            }
         }
        .show{
            margin-top: 30px;
        }
        .checkList{
            margin-top: 30px;
        }
        .savefn{
            margin:40px 30px 20px 0;
        }
        // 首页暂无数据提示
        .jx-course-infos {
            text-align: center;
            margin: 160px 0 170px;
                span {
                    display: block;
                    margin-top: 15px;
                    font-size: 14px;
            }
         }
    }
</style>